<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>管理员登录 - 内容评级平台</title>
    <!-- 引入Tailwind CSS -->
    <script src="https://cdn.tailwindcss.com"></script>
    <!-- 引入Font Awesome -->
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">

    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#165DFF',
                        secondary: '#4080FF',
                        success: '#00B42A',
                        warning: '#FF7D00',
                        danger: '#F53F3F',
                        neutral: {
                            100: '#F2F3F5',
                            200: '#E5E6EB',
                            300: '#C9CDD4',
                            400: '#86909C',
                            500: '#4E5969',
                            600: '#272E3B',
                            700: '#1D2129',
                        }
                    },
                    fontFamily: {
                        inter: ['Inter', 'system-ui', 'sans-serif'],
                    },
                }
            }
        }
    </script>

    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .form-input-focus {
                @apply focus:ring-2 focus:ring-primary/50 focus:border-primary transition-all duration-200;
            }
            .btn-hover {
                @apply hover:shadow-lg hover:-translate-y-0.5 transition-all duration-200;
            }
            .form-label {
                @apply block text-sm font-medium text-neutral-700 mb-1;
            }
            .error-message {
                @apply text-danger text-xs mt-1 block;
            }
            .input-icon {
                @apply absolute inset-y-0 left-0 flex items-center pl-4 text-neutral-400 text-xl;
            }
        }
    </style>
</head>
<body class="bg-neutral-100 min-h-screen font-inter">
<div class="container mx-auto px-4 py-12 md:py-20 max-w-4xl">
    <!-- 页面标题 -->
    <div class="text-center mb-10">
        <h1 class="text-[clamp(1.8rem,4vw,2.5rem)] font-bold text-neutral-700 mb-3">内容评级平台</h1>
        <div class="flex justify-center space-x-4 mt-4">
            <button id="userModeBtn" class="px-6 py-2 rounded-full bg-white text-primary border border-primary font-medium hover:bg-primary/5 transition-colors" onclick="window.location.href='Userlogin.jsp'">
                <i class="fa fa-user mr-2"></i>用户模式
            </button>
            <button id="adminModeBtn" class="px-6 py-2 rounded-full bg-primary text-white font-medium">
                <i class="fa fa-cog mr-2"></i>管理员模式
            </button>
        </div>
    </div>

    <!-- 主卡片 -->
    <div class="bg-white rounded-xl shadow-lg overflow-hidden">
        <div class="grid md:grid-cols-2">
            <!-- 左侧图片区域 -->
            <div class="hidden md:block bg-gradient-to-br from-primary to-secondary p-8 flex items-center justify-center">
                <div class="text-white text-center">
                    <i class="fa fa-shield text-[120px] mb-6 opacity-80"></i>
                    <h3 class="text-2xl font-semibold mb-3">管理员登录</h3>
                    <p class="opacity-90">仅限授权人员访问</p>
                    <p class="opacity-80 mt-4 text-sm">如非管理员，请返回用户登录</p>
                </div>
            </div>

            <!-- 右侧表单区域 -->
            <div class="p-6 md:p-10">
                <div class="md:hidden mb-6 text-center text-danger">
                    <i class="fa fa-exclamation-triangle mr-1"></i>
                    <span>注意：此为管理员专用登录页面</span>
                </div>

                <!-- 错误提示 -->
                <% if (request.getAttribute("error") != null) { %>
                <div class="mb-6 p-3 bg-danger/10 text-danger rounded-lg text-sm">
                    <i class="fa fa-exclamation-circle mr-2"></i>
                    <%= request.getAttribute("error") %>
                </div>
                <% } %>

                <!-- 登录表单 -->
                <form id="adminLoginForm" action="AdminLoginServlet" method="post">
                    <!-- 管理员账号 -->
                    <div class="mb-6">
                        <label for="adminUsername" class="form-label">
                            <i class="fa fa-user-circle mr-1"></i>管理员账号
                        </label>
                        <div class="relative">
                            <span class="input-icon">
                                <i class="fa fa-user-circle"></i>
                            </span>
                            <input type="text" id="adminUsername" name="adminUsername" required
                                   class="pl-12 w-full rounded-lg border border-neutral-300 py-4 px-4 text-neutral-700 form-input-focus"
                                   placeholder="请输入管理员账号">
                        </div>
                        <div class="error-message" id="adminUsernameError"></div>
                    </div>

                    <!-- 密码 -->
                    <div class="mb-6">
                        <label for="adminPassword" class="form-label">
                            <i class="fa fa-lock mr-1"></i>密码
                        </label>
                        <div class="relative">
                            <span class="input-icon">
                                <i class="fa fa-lock"></i>
                            </span>
                            <input type="password" id="adminPassword" name="adminPassword" required
                                   class="pl-12 w-full rounded-lg border border-neutral-300 py-4 px-4 text-neutral-700 form-input-focus"
                                   placeholder="请输入管理员密码">
                            <button type="button" id="toggleAdminPassword" class="absolute inset-y-0 right-0 flex items-center pr-3 text-neutral-400 hover:text-neutral-600">
                                <i class="fa fa-eye-slash"></i>
                            </button>
                        </div>
                        <div class="error-message" id="adminPasswordError"></div>
                    </div>

                    <!-- 管理员密钥 -->
                    <div class="mb-8">
                        <label for="adminKey" class="form-label">
                            <i class="fa fa-key mr-1"></i>管理员密钥
                        </label>
                        <div class="relative">
                            <span class="input-icon">
                                <i class="fa fa-key"></i>
                            </span>
                            <input type="password" id="adminKey" name="adminKey" required
                                   class="pl-12 w-full rounded-lg border border-neutral-300 py-4 px-4 text-neutral-700 form-input-focus"
                                   placeholder="请输入管理员密钥">
                        </div>
                        <div class="error-message" id="adminKeyError"></div>
                    </div>

                    <!-- 提交按钮 -->
                    <button type="submit" class="w-full bg-primary hover:bg-primary/90 text-white font-medium py-4 px-4 rounded-lg transition-all duration-200 btn-hover flex items-center justify-center text-lg">
                        <i class="fa fa-sign-in mr-2"></i>
                        管理员登录
                    </button>
                </form>
            </div>
        </div>
    </div>

    <!-- 页脚 -->
    <div class="text-center mt-8 text-neutral-500 text-sm">
        <p>© 2025 大运版权所有</p>
        <p class="mt-1 text-xs text-neutral-400">管理员登录仅对授权人员开放，未经许可的访问将被记录</p>
    </div>
</div>

<script>
    // 密码显示/隐藏切换
    document.getElementById('toggleAdminPassword').addEventListener('click', function() {
        const passwordInput = document.getElementById('adminPassword');
        const icon = this.querySelector('i');

        if (passwordInput.type === 'password') {
            passwordInput.type = 'text';
            icon.classList.remove('fa-eye-slash');
            icon.classList.add('fa-eye');
        } else {
            passwordInput.type = 'password';
            icon.classList.remove('fa-eye');
            icon.classList.add('fa-eye-slash');
        }
    });

    // 表单验证
    document.getElementById('adminLoginForm').addEventListener('submit', function(e) {
        let isValid = true;

        // 验证用户名
        const username = document.getElementById('adminUsername');
        if (username.value.trim() === '') {
            document.getElementById('adminUsernameError').textContent = '请输入管理员账号';
            document.getElementById('adminUsernameError').style.display = 'block';
            isValid = false;
        } else {
            document.getElementById('adminUsernameError').style.display = 'none';
        }

        // 验证密码
        const password = document.getElementById('adminPassword');
        if (password.value.trim() === '') {
            document.getElementById('adminPasswordError').textContent = '请输入密码';
            document.getElementById('adminPasswordError').style.display = 'block';
            isValid = false;
        } else if (password.value.length < 8) {
            document.getElementById('adminPasswordError').textContent = '密码长度不能少于8位';
            document.getElementById('adminPasswordError').style.display = 'block';
            isValid = false;
        } else {
            document.getElementById('adminPasswordError').style.display = 'none';
        }

        // 验证密钥
        const adminKey = document.getElementById('adminKey');
        if (adminKey.value.trim() === '') {
            document.getElementById('adminKeyError').textContent = '请输入管理员密钥';
            document.getElementById('adminKeyError').style.display = 'block';
            isValid = false;
        } else {
            document.getElementById('adminKeyError').style.display = 'none';
        }

        if (!isValid) {
            e.preventDefault();
        }
    });
</script>
</body>
</html>